<template>
  <div class="main">
    <el-card class="box-card">
      <div class="top">
        <div>点位搜索：</div>
        <el-input v-model="search" class="input" size="medium" placeholder="请输入" />

        <div>区域搜索：</div>
        <el-select v-model="searchRegion" placeholder="请选择" size="medium" class="select">
          <el-option
            v-for="item in regionoptions"
            :key="item.remark"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
        <el-button type="primary" size="small" @click="serchIt()">
          <i class="el-icon-search" />
          查询
        </el-button>
      </div>

    </el-card>
    <el-card class="table">
      <el-button type="warning" class="add" @click="openDialog('add')"> <i class="el-icon-circle-plus-outline" />新建</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
      >
        <el-table-column
          prop="date"
          label="序号"

          type="index"
        />
        <el-table-column
          prop="name"
          label="点位名称"
        />
        <el-table-column
          label="所在区域"
        >
          <!-- 插槽干掉prop -->
          <template #default="{row}">
            <p>{{ row.region.name }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="businessType"
          label="商圈类型"
        >
          <!-- 插槽干掉prop -->
          <template #default="{row}">
            <p>{{ row.businessType.name }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="ownerName"
          label="合作商"
        />
        <el-table-column
          prop="addr"
          label="详细地址"
        />
        <el-table-column
          prop="address"
          label="操作"
        >
          <template #default="{row}">
            <el-button type="text" @click="openDetail(row.id)">查看详情</el-button>
            <el-button type="text" @click="openDialog('edit',row)">修改</el-button>
            <el-button type="text" class="delete" @click="tips()">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <PageTool :info="queryPage" @handleCurrentChange="handleCurrentChange" />
    </el-card>
    <!-- ------------------------分页-----------------TODO---------------------------------- -->
    <!-- -----------------添加以及修改弹窗----------------- -->
    <el-dialog
      :title="cardTitle"
      :visible.sync="dialogVisible"
      width="45%"
      @close="close"
    >
      <div class="formDia">
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
          <el-form-item label="点位名称 :" prop="name">
            <el-input
              v-model="form.name"
              maxlength="15"
              show-word-limit
              placeholder="请输入"
              class="diaInput"
            />
          </el-form-item>
          <el-form-item label="所在区域 :" prop="regionId">
            <el-select v-model="form.regionId" placeholder="请选择" size="medium" class="formselect">
              <el-option
                v-for="item in regionoptions"
                :key="item.remark"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属商圈 :" prop="businessId">
            <el-select v-model="form.businessId" placeholder="请选择" size="medium" class="formselect">
              <el-option
                v-for="item in businessoptions"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归属合作社 :" prop="ownerName">
            <el-select v-model="form.ownerName" placeholder="请选择" size="medium" class="formselect">
              <el-option
                v-for="item in owneroptions"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址 :" prop="addr">
            <el-cascader
              v-model="selectedOptions"
              size="large"
              :options="options"
              @change="handleChange"
            />

            <el-input
              v-model="form.addr"
              type="textarea"
              maxlength="40"
              show-word-limit
              placeholder="请输入备注(不超过40字)"
              class="diaTextArea"
              rows="3"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="warning" plain @click="close()">取消</el-button>
            <el-button type="warning" @click="subAddEdit()">确认</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-dialog>
    <!-- ----------------------------详情弹窗------------------------ -->
    <el-dialog
      title="点位详情"
      :visible.sync="detailDIA"
      width="45%"
    >

      <el-table
        :data="detData"
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="序号"

          type="index"
        />
        <el-table-column
          prop="innerCode"
          label="机器编号"
        />
        <el-table-column
          prop="vmStatus"
          label="设备状态"
        >
          <template #default="{row}">
            <span>{{ row.vmStatus?'运营':'未投放' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="最后一次供货时间"
        />
      </el-table>

    </el-dialog>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { getPoints, detailPoints, getBusinessType, addPoints, updatePoints } from '@/api/point/pointS'
import { getAreaList } from '@/api/point/area'
import { getPartner } from '@/api/point/Partner'
import PageTool from '@/views/equipment/components/page-tool.vue'
export default {
  name: '',
  components: {
    PageTool
  },
  props: {
  },
  data() {
    return {
      options: regionData,
      selectedOptions: [],

      dialogVisible: false,
      search: '',
      tableData: [],
      detData: [],
      addroptions: [],
      regionoptions: [],
      businessoptions: [],
      owneroptions: [],
      searchRegion: '',
      detailDIA: false,
      form: {
        name: '',
        addr: '',
        areaCode: 0,
        createUserId: 0,
        regionId: null,
        businessId: null,
        ownerId: null,
        ownerName: null

      },
      rules: {
        name: [
          { required: true, message: '请输入区域名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        addr: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 3, max: 40, message: '长度在 3 到 40个字符', trigger: 'blur' }
        ],
        areaCode: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 3, max: 40, message: '长度在 3 到 40个字符', trigger: 'blur' }
        ],
        businessId: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 3, max: 40, message: '长度在 3 到 40个字符', trigger: 'blur' }
        ],

        ownerName: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 3, max: 40, message: '长度在 3 到 40个字符', trigger: 'blur' }
        ],
        regionId: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 3, max: 40, message: '长度在 3 到 40个字符', trigger: 'blur' }
        ] },
      type: 'add',
      queryPage: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      },
      updateId: 0
    }
  },
  computed: { cardTitle() {
    if (this.type === 'add') {
      return '新增点位'
    } else {
      return '修改点位'
    }
  } },
  created() {
    this.pointsList()
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    handleAddress() {
      for (let i = 0; i < this.addressSelections.length; i++) {
        if (i === 0) {
          this.form.province = CodeToText[this.addressSelections[i]]
        }
        if (i === 1) {
          this.form.city = CodeToText[this.addressSelections[i]]
        }
        if (i === 2) {
          this.form.town = CodeToText[this.addressSelections[i]]
        }
      }
    },
    getAddressInfo() {
      this.addressSelections = []
      this.form.provinceCode = this.form.province ? TextToCode[this.form.province].code : ''
      this.form.cityCode = this.form.city ? TextToCode[this.form.province][this.form.city].code : ''
      this.form.townCode = this.form.town ? TextToCode[this.form.province][this.form.city][this.form.town].code : ''
      this.addressSelections.push(this.form.provinceCode)
      this.addressSelections.push(this.form.cityCode)
      this.addressSelections.push(this.form.townCode)
    },
    // 分页
    handleCurrentChange(val) {
      this.queryPage.pageIndex = val
      this.pointsList()
    },
    // 查询框搜索
    serchIt() {
      this.tableData = this.tableData.filter(item => item.name === this.search || item.region.name === this.searchRegion)
    },
    // 获取页面列表
    async pointsList() {
      const { totalCount, totalPage } = await getPoints(this.queryPage)
      this.queryPage.totalCount = totalCount
      this.queryPage.totalPage = totalPage
      const data = await getPoints(this.queryPage)
      this.tableData = data.currentPageRecords
      console.log(data)
      console.log(this.tableData)
      // 获取区域商圈合作商列表
      this.businessoptions = await getBusinessType()
      const { currentPageRecords: regionoptions } = await getAreaList(this.queryPage)
      this.regionoptions = regionoptions
      console.log(this.regionoptions)
      const { currentPageRecords: owneroptions } = await getPartner(this.queryPage)
      this.owneroptions = owneroptions
      // -----------------城市列表TODO-------------------------------
    },
    // 删除提示
    tips() {
      const h = this.$createElement

      this.$notify({
        title: '提示',
        message: h('p', '系统演示,不支持此操作'),
        type: 'info'
      })
    },
    // 打开详情弹窗
    async openDetail(id) {
      this.detailDIA = true
      const data = await detailPoints(id)
      console.log(data)
      this.detData = data
    },

    // 打开添加或修改弹窗
    async  openDialog(type, row) {
      this.dialogVisible = true
      this.type = type
      if (this.type === 'edit') {
        console.log(row)
        row.id = this.updateId
        this.form.name = row.name
        this.form.addr = row.addr
        this.form.areaCode = row.areaCode
        this.form.createUserId = row.createUserId
        this.form.regionId = row.regionId
        this.form.businessId = row.businessId
        this.form.ownerId = row.ownerId
        this.form.ownerName = row.ownerName
        console.log(row)
      } else {
        console.log(2)
      }
    },
    // 关闭弹窗
    close() {
      console.log(1)
      this.form = {
        name: '',
        addr: '北京市朝阳区芍药居',
        areaCode: 0,
        createUserId: 0,
        regionId: null,
        businessId: null,
        ownerId: null,
        ownerName: null
      }
      this.dialogVisible = false
    },
    // 提交添加或修改
    async subAddEdit() {
      console.log(this.addressSelections)
      if (this.type === 'add') {
        this.form.addr = this.form.name

        await addPoints(this.form)
        this.$message.success('添加成功')
      } else {
        await updatePoints(this.updateId, this.form)
        this.$message.success('修改成功')
      }
      this.pointsList()
      this.close()
    }
  }

}
</script>

<style scoped lang='scss'>

.delete{
  color: red;
}
.el-icon-circle-plus-outline{
  margin-right: 7px;
}
.main{
  margin-top: 70px;
  padding: 0 20px;
}
.formDia{
  padding-right: 60px;
 .formselect{
   width: 450px;
  }
  .diaTextArea{
    margin-top: 20px;
  }
}
  .top{
display: flex;
justify-content: flex-start;
align-items: center;
  .input{
  width: 200px;
  margin-right: 15px;
}
.select{
   margin-right: 15px;
}
  }
  .table{
    width: 100%;
    margin-top: 20px;
  }
.add{
  margin-bottom: 25px;
}
</style>
